<template>
	<view class="bg" :style="{background:'url('+pointBg+') no-repeat center','background-size': 'cover'}">
		<view class="container">
			<view class="frame_view">
				<view class="frame_row">
					<view class="frame_item" :class="curIndex==0?'on':''">
						<image :src="award[0].picUrl" mode="widthFix"></image>
						<!-- <text class="u-line-1">{{ award[0].title }}</text> -->
					</view>
					<view class="frame_item" :class="curIndex==1?'on':''">
						<image :src="award[1].picUrl" mode="widthFix"></image>
						<!-- <text class="u-line-1">{{ award[1].title }}</text> -->
					</view>
					<view class="frame_item" :class="curIndex==2?'on':''">
						<image :src="award[2].picUrl" mode="widthFix"></image>
						<!-- <text class="u-line-1">{{ award[2].title }}</text> -->
					</view>
				</view>

				<view class="frame_row">
					<view class="frame_item" :class="curIndex==7?'on':''">
						<image :src="award[7].picUrl" mode="widthFix"></image>
						<!-- <text>{{ award[7].title }}</text> -->
					</view>
					<!-- 抽奖 -->
					<view style="margin-bottom: 10px;" @click="clickLuck">
						<image style="width: 168rpx;height:168rpx ;display: block;border-radius: 4px;"
							:src="pointBtn"></image>
					</view>
					<view class="frame_item" :class="curIndex==3?'on':''">
						<image :src="award[3].picUrl" mode="widthFix"></image>
						<!-- <text>{{ award[3].title }}</text> -->
					</view>
				</view>

				<view class="frame_row">
					<view class="frame_item" :class="curIndex==6?'on':''">
						<image :src="award[6].picUrl" mode="widthFix"></image>
						<!-- <text class="u-line-1">{{ award[6].title }}</text> -->
					</view>
					<view class="frame_item" :class="curIndex==5?'on':''">
						<image :src="award[5].picUrl" mode="widthFix"></image>
						<!-- <text class="u-line-1">{{ award[5].title }}</text> -->
					</view>
					<view class="frame_item" :class="curIndex==4?'on':''">

						<image :src="award[4].picUrl" mode="widthFix"></image>
						<!-- <text class="u-line-1">{{ award[4].title }}</text> -->
					</view>
				</view>
			</view>


		</view>
		<!-- 弹出窗口 -->

	</view>
</template>

<script>
	//计数器
	var interval = null;
	//值越大旋转时间越长  即旋转速度
	var intime = 100;
	export default {
		props: {
			//奖品数据
			award: {
				type: Array,
				default: () => ([])
			},
		},
		data() {
			return {
				//抽奖记录的显示
				cjtime: "",
				// nowIndex为0的时候显示抽奖规则，nowIndex为1的时候显示抽奖记录
				nowIndex: 0,
				pointBtn:'',
				pointBg:'',
				curIndex: -1,
				// 九宫格初始化的位置
				color: [0, 0, 0, 0, 0, 0, 0, 0],
				//chance中奖率   
				Luck: true, //防置重复点击
				lucktype: 2, //判断奖品类型
				luckPosition: 0, //停止位置
				prize: '', //奖品，
				prizeimg: '', //奖品图片
				prize_data: {},
				prize_data_copy: [],
				// 弹窗按钮
				shareState: false,
				//免费抽奖次数
				free: 3,
				// 判断类型
				payout: 0
			};
		},
		created() {
			
			this.$api.dictList({
				dictType: 'point_buttons'
			}, res => {
				if (res.code == 200) {
					
					this.pointBtn = res.data[0].remark
						this.pointBg = res.data[1].remark
				}
			})
		},
		methods: {

			//获取当前时间戳
			getCurrentDate() {
				const date = new Date();
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = this.formatNumber(date.getDate());
				const hours = this.formatNumber(date.getHours());
				const minutes = this.formatNumber(date.getMinutes());
				const seconds = this.formatNumber(date.getSeconds());
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},

			formatNumber(number) {
				return number < 10 ? '0' + number : number;
			},

			// 记录切换nowIndex(0)的时候显示活动规则nowIndex(1)的时候显示奖品记录
			toggleTabs(index) {
				this.nowIndex = index;
			},
			// 关闭中奖弹窗
			handleHiddenShare() {
				this.shareState = false;
			},
			// 点击抽奖
			clickLuck() {
				if (this.Luck == false) { //防止过度点击
					return;
				}
				this.Luck = false;


				
				this.$api.exchangeAdd({}, res => {
					if (res.code == 200) {
						
						
						this.Luck = true;
						//循环设置每一项的背景图
						let interval = setInterval(() => {
							this.curIndex = Math.floor(Math.random() * 8);
						}, 50);
						setTimeout(() => {
							clearInterval(interval)
							this.award.some((item,index)=>{
								if(item.id==res.data.configId){
									
									this.curIndex=index
									res.data.picUrl=item.picUrl
								}
							})
							this.Luck = true;
							this.$emit('changePrize',res.data);
						}, 3 * 1000)
					}else{
						
						this.Luck = true;
						this.$common.errorToShow(res.message)
					}
				})
				
				return
				// }
				//判断免费次数		
				if (this.free == 0) {
					this.shareState = true
					this.lucktype = 0
					this.Luck = true;
					return;
				}
				var arr = [];
				//根据概率循环位置
				for (var i = 0; i < this.award.length; i++) {
					for (var k = 0; k < this.award[i].chance; k++) {
						arr.push(i);
					}
				}
				// console.log(arr, "位置");
				//随机打乱数组
				for (let i = 0, len = arr.length; i < len; i++) {
					let index = parseInt(Math.random() * (len - 1));
					let tempValue = arr[i];
					arr[i] = arr[index];
					arr[index] = tempValue;
				}
				//从数组中随机抽取一个位置
				var a = Math.ceil(Math.random() * 10);
				if (this.free != 0) {
					this.free = this.free - 1 //抽奖次数减1
				}
				if (this.free == 0) {
					this.payout = 1
				}
				this.luckPosition = arr[a]; //位置
				this.prize = this.award[arr[a]].title; //奖品名称
				this.prizeimg = this.award[arr[a]].picUrl //奖品图片
				this.prize_data = this.award[arr[a]]; //奖品数据
				// 设置this
				var e = this;
				//清空计时器
				clearInterval(interval);
				var index = 0;
				//循环设置每一项的背景图
				interval = setInterval(function() {
					var c = [0, 0, 0, 0, 0, 0, 0, 0];
					if (index > 7) {
						index = 0;
					}
					c[index] = 1;
					e.color = c;
					index++;
				}, intime);
				e.stop(e.luckPosition);
			},

			// 停止
			stop(which) {
				var e = this;
				//清空计数器
				clearInterval(interval);
				//初始化当前位置
				var current = -1;
				var color = e.color;
				for (var i = 0; i < color.length; i++) {
					if (color[i] == 1) {
						current = i;
					}
				}
				//下标从1开始
				var index = current + 1;
				e.stopLuck(which, index, intime, 10);
			},
			/**
			 * which:中奖位置
			 * index:当前位置
			 * time：时间标记
			 * splittime：每次增加的时间 值越大减速越快
			 */
			stopLuck(which, index, time, splittime) {
				var e = this;
				//值越大出现中奖结果后减速时间越长
				var color = e.color;
				setTimeout(function() {
					//重置前一个位置
					var c = [0, 0, 0, 0, 0, 0, 0, 0];
					if (index > 7) {
						index = 0;
					}
					//当前位置为选中状态
					c[index] = 1;
					e.color = c;
					//如果旋转时间过短或者当前位置不等于中奖位置则递归执行
					//直到旋转至中奖位置
					if (time < 400 || index != which) {
						//越来越慢
						splittime++;
						time += splittime;
						//当前位置+1
						index++;
						e.stopLuck(which, index, time, splittime);
					} else {
						//中奖
						e.shareState = true
						e.Luck = true;
						e.lucktype = 1
						if (e.payout == 1) {
							e.limitnum = e.limitnum - 3
						}
						e.$emit('changePrize', e.prize_data);
						if (e.prize_data.title == '谢谢参与') return;
						e.prize_data.time = e.getCurrentDate();
						e.prize_data_copy.push(e.prize_data);
					}
				}, time);
			},
			// 分享加一次
			clickLuckFive() {
				this.free = this.free + 1;
			}

		},


	};
</script>

<style lang="scss">
	.bg {
		// background-color: #19291C;
		border-radius: 5px;
		padding: 10px;

	}

	.active {
		border-bottom: 6rpx solid #A24A1E;
	}

	.container {
		// background: #799361;
		padding: 5px;
		padding-bottom: 0;
		border-radius: 5px;
		overflow: hidden;
	}

	.limitbean {
		width: 100%;
		color: #fff;
		text-align: center;
		margin-top: 200rpx;
		font-size: 34rpx;
		margin-bottom: 24rpx;
	}

	.frame_view {}

	.frame_row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

	}

	.frame_item {
		width: 168rpx;
		height: 168rpx;
		// padding:20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		font-size: 20px;
		position: relative;
		margin-bottom: 10px;
		/* box-sizing:border-box; */
		// background: rgba(242, 251, 237, 0.7);
		border-radius: 5px;
		/* 	border-radius: 17px; */
		/* 	box-shadow: 0px 6px 0px 0px rgba(236,231,228,1); */
		background-size: 100% 100%;
		&::after{
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 100;
			display: block;
			background: rgba(0, 0, 0, 0.05);
		}
		&.on {
			&::after{
				
				background: rgba(0, 0, 0, 0);
			}
		}


	}

	.frame_item image {
		width: 100%;
		display: block;
		margin: 0 auto 4px;

	}

	.frame_item text {
		font-size: 24rpx;
		display: block;
		width: 100%;
		text-align: center;
		color: #70B52C;
	}

	.item1 {
		background: url("https://api.myisre.cn/5c0b8cbab139568d38f701f0e.png") no-repeat;
		background-size: 100% 100%;
		/* box-shadow: 0px 10px 20px 0px rgba(170,56,0,1), 0px 0px 20px 0px rgba(196,58,215,1), 0px 4px 0px 0px rgba(255,255,255,0.29); */

	}

	.luckbtulist {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}

	.luckone {
		width: 310upx;
		height: 100upx;
		background: linear-gradient(360deg, #E4392C 0%, #F6A261 100%);
		box-shadow: 0px 10px 20px 0px rgba(153, 0, 0, 0.81), 0px 5px 0px 0px rgba(195, 48, 7, 1), 0px 4px 0px 0px rgba(255, 255, 255, 0.23);
		border-radius: 50upx;
		margin-right: 28rpx;
		text-align: center;
	}

	.luckfive {
		width: 310upx;
		height: 100upx;
		background: linear-gradient(180deg, #FFC3AC 0%, #D43EDC 100%);
		box-shadow: 0px 10px 20px 0px rgba(170, 56, 0, 1), 0px 5px 0px 0px rgba(196, 58, 215, 1), 0px 4px 0px 0px rgba(255, 255, 255, 0.29);
		border-radius: 50px;
		text-align: center;
	}

	.lucktips {
		width: 686rpx;
		background: #0d62ad;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 70rpx;
		margin-bottom: 70rpx;
	}

	.lucktab {
		width: 580rpx;
		height: 104rpx;
		border-bottom: 1rpx solid #e3672a;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 28rpx;
		color: #e3672a;
		font-weight: 600;
	}

	.lucktab view {
		height: 100%;
		line-height: 104rpx;
	}

	.action {

		border-bottom: 3px solid #e3672a;

	}

	.ruleinof {
		width: 584rpx;
		margin: 0 auto;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #D97645;

	}

	.ruleinof .ruleconten {
		line-height: 40rpx;
		padding: 40rpx 0;
	}

	.recordlist {
		padding: 40rpx 0;
	}

	.recordlist>view {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.share-box {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		bottom: 0rpx;
		right: 0rpx;
		background-color: rgba(0, 0, 0, 0.4);
		transition: .3s;
		z-index: 999;
	}

	.nopop {
		display: none;
		width: 470rpx;
		height: 455rpx;
		background: #FFFFFF;
		border-radius: 30px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -228rpx;
		/* 高度的一半 */
		margin-left: -235rpx;
		/* 宽度的一半 */
	}

	.share-show {
		display: block !important;
	}

	.poptitle {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4A4A4A;
		text-align: center;

	}

	.popbtn {
		width: 310upx;
		height: 100upx;
		background: linear-gradient(360deg, #E4392C 0%, #F6A261 100%);
		box-shadow: 0px 10px 10px 0px rgba(153, 0, 0, 0.81), 0px 5px 0px 0px rgba(195, 48, 7, 1), 0px 4px 0px 0px rgba(255, 255, 255, 0.23);
		border-radius: 50upx;
		margin-right: 28rpx;
		text-align: center;
		line-height: 100upx;
		font-size: 32upx;
		color: #fff;
		margin: 0 auto;
		margin-top: 36upx;
	}

	.onepop {
		display: none;
		width: 696rpx;
		height: 872rpx;
		background: url("https://api.myisre.cn/5c0b8cbab139568d38f701f0f.png") no-repeat;
		background-size: 100% 100%;
		position: absolute;
		left: 50%;
		top: 40%;
		margin-top: -438rpx;
		/* 高度的一半 */
		margin-left: -350rpx;
		/* 宽度的一半 */
		overflow: hidden;
	}

	.popconten {
		width: 470rpx;
		height: 472rpx;
		background: url("https://api.myisre.cn/5c0b8cbab139568d38f701f10.png") no-repeat;
		background-size: 100% 100%;
		margin: 0 auto;
		margin-top: 340rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.popcontenlist {
		width: 470rpx;
		height: 300rpx;
		margin: 0 auto;
		margin-top: 370rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

	}

	.poplucklist {
		width: 88rpx;
		height: 180rpx;
		margin-left: 56rpx;
	}
</style>